<template>
  <div class="custom-body" :style="borderStyle">
    <el-empty
      v-if="dataList === null || dataList.length === 0"
      :image-size="100"
    />
    <div v-else class="custom-right">
      <div class="title">近期大家都在办</div>
      <a
        v-for="(item, index) in dataList"
        :key="'server-' + index"
        class="custom-right-li"
        @click="openEntity(item)"
      >
        <span class="custom-li-title">
          <span class="num">{{ index+1 }}</span>
          {{ item[column[0].title] }}
        </span>
      </a>
    </div>
  </div>
</template>

<script>
import { template } from '@/mixins/template'
import { layout } from '@/mixins/layout'
import serviceBg from '@/assets/images/service-image.png'
export default {
  name: 'PcImageListServiceTemp',
  // 快速导航
  mixins: [template, layout],
  data() {
    return {
      serviceBg: serviceBg,
      borderStyle: { background: 'url(' + serviceBg + ') no-repeat', backgroundSize: '100% 100%' }
    }
  },
  computed: {
    lineStyle() {
      return {
        '--font-color': this.layoutTheme.menuColor,
        '--font-active-color': this.layoutTheme.menuActiveColor
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.custom-body {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  background-color: #ffffff;
  border-radius: 4px;
  box-sizing: border-box;
  overflow: hidden;

}

.title {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #212a39;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(191,192,200,.3);
    margin-bottom: 10px;
}
.custom-right {
  flex: 1 1 auto;
  width: 100%;
  height: 430px;
  padding: 21px 25px 10px;
  position: relative;
  background-size: cover;
  overflow-y: auto;
}
.custom-right-li {
  width: 30%;
  border: 1px solid transparent;
  margin: 0 1.65% 9px;
  box-sizing: border-box;
  display: inline-block;
  font-size: 16px;
  color: #6b6f8c;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  // width: 33.3333%;
  // padding: 10px;
  // box-sizing: border-box;
  // cursor: pointer;
  // height: 50%;
  // float: left;
  // position: relative;
  // border-radius: 4px;
  .num{
    display: inline-block;
    margin-right: 10px;
    width: 26px;
    height: 26px;
    background: #fff3e3;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    color: #ff7b05;
    line-height: 26px;
    text-align: center;
  }
}

.custom-right-li:hover {
  border: 1px solid #ff7b05;
  box-shadow: 0 8px 16px 0 rgb(225 227 229/79%);
  border-radius: 4px;
  color: #212a39;
}

.custom-right-li:hover {
  border: 1px solid #ff7b05;
  box-shadow: 0 8px 16px 0 rgb(225 227 229/79%);
  border-radius: 4px;
  color: #212a39;
  .num{
    background: #ff7b05;
    color: #fff;
  }
}
.custom-li-title {
  // flex: 1 1 auto;
  // height: 100%;
  // padding: 10px 5px;
  // box-sizing: border-box;
  // position: relative;
  display: block;
  height: 52px;
  line-height: 52px;
  padding: 0 10px 0 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;

}
.custom-li-line-top {
  position: absolute;
  width: 100%;
  line-height: 18px;
  top: 15px;
  left: 0;
  right: 0;
}
.custom-li-line-bottom {
  position: absolute;
  bottom: 15px;
  height: 20px;
  left: 0;
  right: 0;
  width: 100%;
  font-size: 0.8rem;
}
</style>
